<?php echo $this->render('layouts/__header.phtml'); ?>
<?php echo $this->render('layouts/__nav.phtml'); ?>

<link rel="stylesheet" type="text/css" href="/css/task.css" />
<script type="text/javascript" src="/js/base.js"></script>
<script type="text/javascript">
var opentask = function(taskId, isOpen) {
	var request_uri = '<?php echo $this->this_url;?>?ajax=1&t='+(new Date()).getTime();
	new Ajax(request_uri, {
		method: 'get',
		evalScripts : true,
		data: Object.toQueryString({
			ti: taskId,
			io: isOpen
		}),
		update: 'tasklistbox',
		onComplete: function() {dragready();}
	}).request();
}
var viewtask = function(taskId) {
	var request_uri = '<?php echo $this->this_url;?>?ajax=1&t='+(new Date()).getTime();
	PopBox.pop('loading ...', {loading:true});
	new Ajax(request_uri, {
		method: 'get',
		evalScripts : true,
		data: Object.toQueryString({
			fn: 'view',
			ti: taskId
		}),
		onComplete: function(){
			PopBox.pop(this.response.text);
		}
	}).request();
}
window.addEvent('domready', function(){
	$('gopagebtn').addEvent('click', function(e){
		e = new Event(e);
		var page_to = parseInt($('pageto').value);
		var page_num = (page_to > 1) ? $('pageto').value : 1;
		var page_url = '<?php echo $this->base_url;?>index/p/'+page_num;
		redirect(page_url);
		e.stop();
		
	});
	<?php if ($this->acl->isAllowed($this->role, 'create')) : ?>
	$('addtaskbtn').addEvent('click', function(e){
		e = new Event(e);
		redirect('<?php echo $this->create_url;?>');
		e.stop();
	});
	<?php endif; ?>
	/////////////////////////////////////////////////////
	// search select from filter
	var request_uri = '<?php echo $this->filter_url;?>?t='+(new Date()).getTime();
	['task_status','task_prior','property_id','request_id','manager_id','developer_id'].each(function(item, index){
		$(item).addEvent('change', function(e){
			$('loadingbox').setStyle('display', 'block');
			new Ajax(request_uri, {
				method: 'get',
				data: Object.toQueryString({
					k: item,
					v: $(item).value
				}),
				onComplete: function(){
					if ('success' == this.response.text) {
						redirect('<?php echo $this->base_url;?>');
					}
				}
			}).request();
		});
	});
	['title'].each(function(item, index){
		$(item).addEvent('keyup', function(e){
			var event = new Event(e);
			if (event.key == 'enter') {
				$('loadingbox').setStyle('display', 'block');
				new Ajax(request_uri, {
					method: 'get',
					data: Object.toQueryString({
						k: item,
						v: $(item).value
					}),
					onComplete: function(){
						if ('success' == this.response.text) {
							redirect('<?php echo $this->base_url;?>');
						}
					}
				}).request();
			}
			event.stop();
		});
	});
	/////////////////////////////////////////////////////
	// set sorter
	$('sorter_duedate').addEvent('click', function(e){
		var re_uri = '<?php echo $this->sorter_url;?>?t='+(new Date()).getTime();
		var sorter = '<?php if ($this->sorter['date_end'] == 'desc') echo 'asc'; else echo 'desc'; ?>';
		$('loadingbox').setStyle('display', 'block');
		new Ajax(re_uri, {
			method: 'get',
			data: Object.toQueryString({
				k: 'date_end',
				v: sorter
			}),
			onComplete: function(){
				if ('success' == this.response.text) {
					redirect('<?php echo $this->base_url;?>');
				}
			}
		}).request();
	});
	/////////////////////////////////////////////////////
	// for page tips
	new Tips($$('.Tips_proc'));
});

window.addEvent('domready', function(){dragready();});
function dragready() {
	var tt=null;
	var stop=0;
	var sleft=0;
	$$('#tasklist tr.toptask').each(function(drag){
		drag.addEvent('mouseover',function(){
			if (tt != null) {
				drag.addClass('taskdrag-over');
			}
		});
		drag.addEvent('mouseout',function(){
			if (tt != null) {
				drag.removeClass('taskdrag-over');
			}
		});
		
		new Drag.Move(drag, {
			container: true,
			droppables: $$('#tasklist tr.toptask'),			
			onStart: function(drag) {
				tt = drag;
				stop = parseInt(drag.getStyle('top'));
				sleft = parseInt(drag.getStyle('left'));
				$$('#tasklist tr.toptask').each(function(tr){
					tr.removeClass('taskdrag-move');
				});
				$('tasklist').addClass('tasksdrag-move');
				drag.addClass('taskdrag-move');
			},
			onDrag: function (drag) {
				$('tasklist').addClass('tasksdrag-move');
				drag.addClass('taskdrag-move');
				drag.setStyle('top', stop);
				drag.setStyle('left', sleft);
			},
			onComplete: function(sdrag) {
				tt = null;
				$('tasklist').removeClass('tasksdrag-move');
				//sdrag.removeClass('taskdrag-move');
				
				var tdrag = this.droppables.filter(this.checkAgainst, this).getLast();
				//if(tdrag == sdrag) return false;
				
				var tn = $$('#tasklist tr.toptask').indexOf(tdrag);
				if (tn < 0) return false;
				tdrag.removeClass('taskdrag-over');				
				var sn = $$('#tasklist tr.toptask').indexOf(sdrag);
				if (sn != tn) {
					if (sn > tn) {	
						sdrag.injectBefore(tdrag);
						setTaskOrder(sdrag.getProperty('id'), tdrag.getProperty('id'));
					} else {			
						sdrag.injectAfter(tdrag);
						setTaskOrder(tdrag.getProperty('id'), sdrag.getProperty('id'));
					}
				}
			}
		});
	});
}

var setTaskOrder = function(sTaskId, tTaskId) {
	sTaskId = sTaskId.replace('task_','');
	tTaskId = tTaskId.replace('task_','');
	var request_uri = '/task/sequence/?ajax=1&t='+(new Date()).getTime();
	new Ajax(request_uri, {
		method: 'get',
		evalScripts : false,
		data: Object.toQueryString({
			fn: 'order',
			sti: sTaskId,
			tti: tTaskId
		}),
		onComplete: function(){
			//alert('OK');
		}
	}).request();
}

function showTaskCol(col, type) {
	if (col=="") return false;
	
	var cols = {task_status: 'Status',
				task_prior: 'Prior',
				task_property: 'Property',
				task_title: 'Title',
				task_requester: 'Requester',
				task_manager: 'PM',
				task_engineer: 'Assign to',
				task_progress: 'Progress',
				task_date_end: 'Due Date',
				task_roadmap: 'Roadmap ID',
				task_edit: 'Edit',
				task_split: 'Split'
				};	
	if (type == undefined) {	
		var taskcols = document.getElementById('taskcols');	
		eval('var coltext = cols.'+col);	
		taskcols.innerHTML += "<option value='"+col+"'>"+coltext+"</option>";	
	} else {
		$('taskcols').getElement('option[value='+col+']').remove();
	}
	
	var selector = '#tasklist td.'+col;
	$$(selector).each(function(td){
		if (td.getStyle('display') != 'none') {			
			td.setStyle('display','none');
		} else {
			td.setStyle('display','');
		}
	});
}
</script>
		<h1>Active Task List</h1>
		<div id="tasklistbox">
	    <table id="tasklist" class="normaltable">	
	    	<tr class="selectarea">
				<td style="width:65px" colspan="3">&nbsp;</td>
				<td class="task_status" style="width:55PX"><?php echo $this->formSelect('task_status', $this->filter['task_status'], array("style" => "width:55px"), $this->entites['status']) ?></td>
				<td class="task_prior" style="width:45px"><?php echo $this->formSelect('task_prior', $this->filter['task_prior'], array("style" => "width:45px"), $this->entites['prior']) ?></td>
				<td class="task_property" style="width:50px"><?php echo $this->formSelect('property_id', $this->filter['property_id'], array("style" => "width:50px"), $this->entites['property']) ?></td>
				<td class="task_title title" style="width:240px"><input id="title" name="title" type="text" class="title" value="<?php echo $this->filter['title']?>" /></td>
				<td class="task_requester" style="width:100px"><?php echo $this->formSelect('request_id', $this->filter['request_id'], array("style" => "width:100px;"), $this->entites['requester']) ?></td>
				<td class="task_manager" style="width:80px"><?php echo $this->formSelect('manager_id', $this->filter['manager_id'], array("style" => "width:80px"), $this->entites['manager']) ?></td>
				<td class="task_engineer" style="width:100px"><?php echo $this->formSelect('developer_id', $this->filter['developer_id'], array("style" => "width:100px"), $this->entites['engineer']) ?></td>
				<td colspan="2">
					<select id='taskcols' style="width:80px;">
					</select>
					<input id="showTaskColBtn" type="button" style="height:25px;" onclick="showTaskCol($('taskcols').value, 'show');" value='Show'>
				</td>
				<td colspan="3" class="sub" style="text-align:right;font-size:10pt;font-weight:bold;color:blue">
				We Get <?php echo $this->sum; ?>
				</td>
			</tr>	
			<tr class="tit">
				<td tyle="width:20PX">&nbsp;</td>
				<td class="task_id">ID</td>
				<td class="task_attachment attachment"><img src="/images/icon_attach.gif"/></td>
				<td class="task_status" style="width:55PX">Status <a href='javascript:showTaskCol("task_status");void(0);'><img src="/images/hidden.gif" /></a></td>
				<td class="task_prior" style="width:50px">Prior <a href='javascript:showTaskCol("task_prior");void(0);'><img src="/images/hidden.gif" /></a></td>
				<td class="task_property" style="width:65px">Property <a href='javascript:showTaskCol("task_property");void(0);'><img src="/images/hidden.gif" /></a></td>
				<td class="task_title">Title <a href='javascript:showTaskCol("task_title");void(0);'> <img src="/images/hidden.gif" /></a></td>
				<td class="task_requester" style="width:100px">Requester <a href='javascript:showTaskCol("task_requester");void(0);'><img src="/images/hidden.gif" /></a></td>
				<td class="task_manager" style="width:80px">PM <a href='javascript:showTaskCol("task_manager");void(0);'><img src="/images/hidden.gif" /></a></td>
				<td class="task_engineer" style="width:100px">Assign to <a href='javascript:showTaskCol("task_engineer");void(0);'><img src="/images/hidden.gif" /></a></td>
				<td class="task_progress" style="width:80px">Progress <a href='javascript:showTaskCol("task_progress");void(0);'><img src="/images/hidden.gif" /></a></td>
				<td style="width:90px" class="sorter hands task_date_end">
				<?php if ($this->sorter['date_end'] == 'desc'):?>Due Date&nbsp;<img id="sorter_duedate" src="/images/arrow_down.gif" /><?php else:?>Due Date&nbsp;<img id="sorter_duedate" src="/images/arrow_up.gif" /><?php endif;?>
				 <a href='javascript:showTaskCol("task_date_end");void(0);'><img src="/images/hidden.gif" /></a>
				</td>
				<td class="task_roadmap" style="width:100px">Roadmap ID <a href='javascript:showTaskCol("task_roadmap");void(0);'> <img src="/images/hidden.gif" /></a></td>
				<td class="task_edit">Edit <a href='javascript:showTaskCol("task_edit");void(0);'><img src="/images/hidden.gif" /></a></td>
				<td class="task_split">Sub <a href='javascript:showTaskCol("task_split");void(0);'><img src="/images/hidden.gif" /></a></td>
			</tr>
			<?php if ($this->task_content == ''): ?>
				<tr><td colspan="15" style="color:#cc0000;height:50px;"><b>Empty Task List ...</b></td></tr>
			<?php else: ?>
				<?php echo $this->task_content; ?>
			<?php endif; ?>
		</table>
		</div>
		
		<div class="taskcolorlist divbtm">
			<table class="taskcolortable"><tr>
			<?php $level = 1; ?>
			<?php foreach ($this->bg_color as $color): ?>
				<td style="height:20px;width:20px;border:1px solid #999;background:<?php echo $color; ?>">&nbsp;</td><td>Level <?php echo $level; ?></td><td>&nbsp;</td>
				<?php $level++; ?>
			<?php endforeach; ?>
			<td style="height:20px;width:20px;text-align:center"><img src="/images/btn_leaf.gif"/></td><td>Leaf Task</td>
			</tr></table>
		</div>
		
		<div class="listbottom">
			<div class="pagelist" <?php if (!$this->pager) {echo 'style="display:none"';} ?> >
			<b>Task&nbsp;<?php echo intval($this->pager['frNum'] + 1);?>&nbsp;~&nbsp;<?php echo intval($this->pager['toNum']);?>&nbsp;Total (<?php echo intval($this->pager['totalNum']);?>)</b>&nbsp;
			<?php echo $this->pager['prevStr'];?>&nbsp;<?php echo $this->pager['pageStr'];?>&nbsp;<?php echo $this->pager['nextStr'];?>&nbsp;<input id="pageto" type="text" /><a id="gopagebtn" href="javascript:;">Go</a>
			</div>
			<?php if ($this->acl->isAllowed($this->role, 'create')) : ?><input id="addtaskbtn" type="button" value="Add Root Task" /><?php endif; ?>
		</div>

		<div id="loadingbox" style="display:none;padding:2px 0px 0px 8px;width:125px;height:20px;text-align:center;position:absolute;top:0px;right:0px;background:#CC0000;color:#fff;z-index:10000;"><b>Loading ...</b></div>

<?php echo $this->render('layouts/__footer.phtml'); ?>